<template>
    <div>
        <a-modal
            :title="taskRequestInfo.id ? '编辑业务需求' : '新建业务需求'"
            :confirm-loading="loading"
            centered
            v-model:visible="visible"
            :width="800"
            :bodyStyle="{ height: '540px', overflowY: 'auto' }"
            okText="保存"
            @ok="handleSave"
            @cancel="handleCancel"
        >
            <a-form layout="inline" ref="ruleFormRef" :model="form" :rules="rules">
                <a-row :gutter="24">
                    <a-col :span="24">
                        <a-form-item label="需求标题" name="requestName">
                            <a-textarea v-model:value="form.requestName" placeholder="请输入需求标题限制200个字" :maxlength="200" auto-size />
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="需求类型" name="requestType">
                            <div style="width: 100%">
                                <a-select placeholder="请选择" v-model:value="form.requestType">
                                    <a-select-option v-for="item of dicOptions.requestType" :key="item.code">
                                        {{ item.dimensionName }}
                                    </a-select-option>
                                </a-select>
                            </div>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="需求描述" name="requestDesc">
                            <div style="position: relative">
                                <TEditor :height="300" ref="editor" v-model="form.requestDesc" />
                            </div>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="发起人" name="initiator">
                            <div style="width: 100%">
                                <HSearchSelectCell
                                    :default-value="{ empId: form.initiatorEmpId, empName: form.initiator }"
                                    keyField="empId"
                                    valueLabelField="empName"
                                    type="allUser"
                                    @success="handleSelectChange($event, 'initiator')"
                                >
                                    <template #label="{ record }"> {{ record.name }}（{{ record.empId }}） </template>
                                </HSearchSelectCell>
                            </div>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="负责人" name="agentUserName">
                            <div style="width: 100%">
                                <HSearchSelectCell
                                    :disabled="form.isRequireAnalyse === '是'"
                                    :default-value="form.agentUserName"
                                    type="systemManager"
                                    label="empName"
                                    :searchQuery="{ catalogCode: form.catalogCode }"
                                    @success="handleSelectChange($event, 'agentUserName')"
                                >
                                    <template #label="{ record }"> {{ record.empName }}（{{ record.empId }}） </template>
                                </HSearchSelectCell>
                            </div>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </a-modal>
    </div>
</template>

<script lang="ts">
import store from '@/store';
import api from '@/api';
import { message } from 'ant-design-vue';
import { HSearchSelectCell } from '@/components';
import { useTaskFormData, useCreateTaskForm } from '@/views/taskRequire/createTaskRequire/hooks';
import { defineComponent, ref, unref, reactive, toRefs, defineAsyncComponent, nextTick } from 'vue';
export default defineComponent({
    components: {
        HSearchSelectCell,
        TEditor: defineAsyncComponent(() => import('@/components/TEditor/index.vue'))
    },
    props: {
        lubiaoDetail: {
            type: Object,
            default: () => ({})
        }
    },
    emits: ['success'],
    setup(props, { emit }) {
        const { form, setForm, resetForm } = useTaskFormData();
        const { handleSelectChange } = useCreateTaskForm(setForm);
        const ruleFormRef = ref<any>();
        const state = reactive<any>({
            visible: false,
            rules: {
                requestName: [{ required: true, message: '需求标题不能为空', trigger: 'blur' }],
                requestDesc: [{ required: true, message: '需求描述不能为空', trigger: 'blur' }]
            },
            loading: false,
            taskRequestInfo: {}
        });
        const open = (taskRequestInfo = {}) => {
            state.visible = true;
            state.taskRequestInfo = { ...taskRequestInfo };
            resetForm();
            init();
        };
        const init = () => {
            nextTick(() => {
                unref(ruleFormRef) && unref(ruleFormRef).clearValidate();
            });
            const { orgList, name, empId } = store.getters.userInfo.employeeDTO;
            if (state.taskRequestInfo.id) {
                Object.keys(form.value).forEach((key) => {
                    setForm({
                        [key]: state.taskRequestInfo[key]
                    });
                });
                setForm({
                    catalogCode: props.lubiaoDetail.catalogCode
                });
            } else {
                setForm({
                    initiator: name,
                    initiatorDept: orgList[0].name,
                    initiatorEmpId: empId,
                    agentUserName: name,
                    agentUser: empId,
                    requestType: '1',
                    catalogCode: props.lubiaoDetail.catalogCode,
                    requestSystem: props.lubiaoDetail.pmpProductDetailDTO.id
                });
            }
        };
        const handleSave = async () => {
            const d = await unref(ruleFormRef).validate();
            if (d) {
                state.loading = true;
                const query: any = {
                    signpostId: props.lubiaoDetail.id,
                    ...unref(form),
                    createUser: store.getters.userInfo.employeeDTO.name,
                    status: '4'
                };
                const { success, errorMsg } = await api.pmpRequestInfoModel.save(query);
                if (success) {
                    message.success(state.taskRequestInfo.id ? '编辑成功' : '创建成功');
                } else {
                    message.error(errorMsg);
                }
                state.visible = false;
                emit('success');
            } else {
                return Promise.reject();
            }
            state.loading = false;
        };
        const handleCancel = () => {
            state.visible = false;
        };
        return {
            ruleFormRef,
            form,
            ...toRefs(state),
            open,
            handleSave,
            handleCancel,
            handleSelectChange
        };
    }
});
</script>

<style scoped>
</style>